<template>
  <div class="flex items-center h-126px w-365px bg-mask-8 relative close-window rounded-6px">
    <div class="flex flex-col items-center cursor-pointer ml-41px z-2" @click="callFront">
      <img :src="CallOuterIcon" alt="" />
      <span class="text-white text-16px font-medium tracking-wider font-medium mt-6px">呼叫</span>
    </div>
    <div
      class="w-3px h-68px rounded-16px ml-28px"
      style="background: rgba(73, 121, 255, 0.7)"
    ></div>
    <div
      class="relative w-172px h-55px bg-mask-3 rounded-4px ml-30px cursor-pointer items-center justify-center text-white text-16px font-bold tracking-wider flex z-2"
      style="border: 2px solid #4979ff"
      @click="emit('on-active')"
    >
      进入商城
      <img :src="CloseLogoIcon" alt="" class="absolute -top-1px -right-1px" />
    </div>
    <div class="absolute left-0 top-0 z-1">
      <img :src="CloseWindowIcon" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useContextStore } from '@renderer/store/modules/context'
import { useLocalHttp, transformNo } from '@renderer/utils/http'
import CloseWindowIcon from '@renderer/assets/closeWIndow.svg'
import CallOuterIcon from '@renderer/assets/callOuter.svg'
import CloseLogoIcon from '@renderer/assets/closeLogo.svg'
import _ from 'lodash'

const emit = defineEmits(['on-active'])
const contextStore = useContextStore()
const call = async () => {
  await useLocalHttp('/env/call')
    .post({
      no: transformNo(contextStore.no),
      store_id: contextStore.store_id,
      store_name: contextStore.store_name
    })
    .json()
}

const callFront = _.throttle(call, 30000)
</script>

<style scoped></style>
